<template>
  <div id="wrapper">
    <video class="videobox" ref="preview" autoplay></video>
    <div class="btnbox">
        <button class="btn btn-danger" @click="btnStartRecordClicked" :disabled="recording">录制屏幕</button>
        <button class="btn btn-danger" @click="btnStopRecordClicked" :disabled="!recording">停止录制</button>
    </div>
  </div>
</template>

<script>
const fs = require("fs");
const path =  require('path')
const SCREEN_WIDTH = 786;
const SCREEN_HEIGHT = 456;
// const PlayerCanvas = require("../PlayerCanvas.js");
const electron = require("electron");
// const { dialog } = require('electron').remote
import PlayerCanvas from '../PlayerCanvas'
  export default {
    name: 'landing-page',
    components: {  },
    data(){
      return {
        recording: false,
        _playerCanvas:null,
      }
    },
    mounted(){
      this._playerCanvas = new PlayerCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
    },
    methods: {
      // open (link) {
      //   this.$electron.shell.openExternal(link)
      // },
      //开始
      async btnStartRecordClicked(){
        this._stream = new MediaStream();
        await this.attachAudioStream();
        this._cameraStream = await navigator.mediaDevices.getUserMedia({video: true, audio: false});

        this._playerCanvas.setCameraVideo(this.createVideoElementWithStream(this._cameraStream));

        this._screenStream = await navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                mandatory: {
                    chromeMediaSource: 'desktop',
                    minWidth: SCREEN_WIDTH,
                    maxWidth: SCREEN_WIDTH,
                    minHeight: SCREEN_HEIGHT,
                    maxHeight: SCREEN_HEIGHT
                }
            }
        });
        //设置屏幕流
        this._playerCanvas.setScreenVideo(this.createVideoElementWithStream(this._screenStream));
        //将canvas转为流
        let playerCanvasStream = this._playerCanvas.canvas.captureStream();
        playerCanvasStream.getTracks().forEach(t => this._stream.addTrack(t));
        this.$refs.preview.srcObject = playerCanvasStream;

        //开始保存文件
        this.startRecord();
      },
      //获取音频
      async attachAudioStream() {
          this._audioStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
          this._audioStream.getAudioTracks().forEach(value => this._stream.addTrack(value));
      },
      //创建视频流容器
      createVideoElementWithStream(stream) {
          let video = document.createElement("video");
          video.autoplay = true;
          video.srcObject = stream;
          return video;
      },
      //停止
      btnStopRecordClicked(){
        this.recording = false;
        this._recorder.stop();
      },
      startRecord(){
        this._recorder = new MediaRecorder(this._stream, {mimeType: "video/webm;codecs=h264"});
        //停止录屏时触发文件保存事件
        this._recorder.start();
        this.recording = true;

        var _this = this;
        this._recorder.ondataavailable = async e => {
            let path = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {
                title: "保存文件",
                defaultPath: "ScreenData.webm"
            });
            
            console.log(path)
            fs.writeFileSync(path, new Uint8Array(await e.data.arrayBuffer()));
            
           
        };
        
      }
    }
  }
</script>

<style>
 

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body { font-family: 'Source Sans Pro', sans-serif; }

  #wrapper {
    background:
      radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 1) 40%,
        rgba(229, 229, 229, .9) 100%
      );
    height: 100vh;
    padding: 5px 5px;
    width: 100vw;
  }
  #wrapper .videobox{
    width: 100%;
    height: 456px;
  }
  .btnbox {
    text-align: right;
  }
  .btnbox .btn {
    padding: 4px 10px;
    cursor: pointer;
  }
</style>
